<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/report/demos.css" type="text/css" media="screen" />
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.common.core.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.line.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.bar.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.common.dynamic.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.common.tooltips.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.common.key.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.common.effects.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.vprogress.js" ></script>
    <script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.drawing.rect.js" ></script>
   	<script src="${pageContext.request.contextPath}/js/RGraph/libraries/RGraph.pie.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/model/js/jquery.ainit-1.1.0.js"></script>
    
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

<script type="text/javascript">  
//禁止后退键 作用于Firefox、Opera  
document.onkeypress=banBackSpace;  
//禁止后退键  作用于IE、Chrome  
document.onkeydown=banBackSpace;  
</script>
    <title>3d报表</title>
    
    <style type="text/css">
		.banner{
			background-image: url("${pageContext.request.contextPath}/report/imgs/report_bg1.png");
			background-repeat: repeat-x;
		}    	
		
		.reb{
			text-align: left;
			vertical-align: top;
		}
		
		.dat{
			border-collapse: collapse;
		}
		
		body{
			width:100%;
			margin:0px;
			padding:0px;
			font-size: 12px;
			font-family: "微软雅黑";
		}
		
		.dat tr td{
			border-bottom: 1px #8DB2E3 solid;
			padding-left:20px;
			padding-right:20px;
			text-align: right;
			font-size: 14px;
			width:auto;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
		
		/** RGraph ***/
		.RGraph_tooltip img {
            display: none;
        }

        .RGraph_tooltip {
            box-shadow: none ! important;
            border: 2px solid blue ! important;
            background-color: white ! important;
            padding: 3px ! important;
            text-align: center;
            font-weight: bold;
            font-family: Verdana;
        }
    </style>
</head>

<body>
    <script>
    	var m_url = "${pageContext.request.contextPath}";
    	$(function(){
    		loadRe();
    	});
		
		function loadRe(){
			var reidStr = $('#reidI').val();
			$('div').each(function(){
    			if(typeof($(this).attr('grf')) != 'undefined' ){
	    			if($(this).attr('grf') == 'bar'){
	    				barDraw(this,reidStr);
	    			}else if($(this).attr('grf') == 'barL'){
	    				barLDraw($(this).attr('id'));
	    			}else if($(this).attr('grf') == 'line'){
	    				lineDraw($(this),reidStr);
	    			}else if($(this).attr('grf') == 'pie'){
	    				pieDraw($(this),reidStr);
	    			}
	    		}
    		});
		}


        function barDraw(obj,reid){
        	var idN = $(obj).attr('id');
        	var config = "";
        	$.ajax({
        		url:m_url+'/report/a',
        		data:{'reid':reid,'config':config},
        		success:function(data){
        			var barData = new Array();//y轴坐标值//[[31,31,10],[13, 43,10],[42, 25,10],[42, 29,10],[59, 28,10],[40, 10,10]];
        			
        			var xClns = data.xcolumnList;
        			var yClns = data.ycolumnName;
        			var colors = data.colors;//颜色['#0179E4','#980055', '#98EDff'];
        			var labels = new Array();//['2008', '2009', '2010', '2011','2012', '2013'];//x轴坐标信息
        			var keys = data.keys;
        			var title = data.title;
        			var xtitle = data.xname;
        			var ytitle = data.yname;
        			
        			var rows = data.dataList;
        			for(var i = 0; i < rows.length; i++){
        				labels[i] = rows[i][xClns];
        				barData[i] = new Array();
        				for(var j = 0; j < yClns.length; j ++){
        					barData[i][j] = rows[i][yClns[j]];
        				}
        			}
		            var bar4 = new RGraph.Bar(idN+'d', barData)
		                .Set('colors', colors)
		                .Set('labels', labels)
		                .Set('key', keys)
		                .Set('gutter.top',40)
		                .Set('labels.above', true)
		                .Set('labels.above.decimals', 2)
		                .Set('numyticks', 5)
		                .Set('ylabels.count', 5)
		                .Set('gutter.left', 35)
		                .Set('variant', '3d')
		                .Set('strokestyle', 'transparent')
		                .Set('title',title)
		                .Set('title.xaxis',xtitle)
		                .Set('title.yaxis', ytitle)
		                .Set('gutter.bottom',40)
		                .Set('gutter.left',40)
		                .Set('title.yaxis.x', -1)
		                .Set('title.xaxis.y', 245)
		                .Set('hmargin.grouped', 0)
		                .Set('scale.round', true)
		                .Draw();
        		}
        	});
        	
        }
        function DrawBottomAxis (obj)
        {
        	var bar = obj;
            var context = bar.context;
            var x = bar.gutterLeft;
            var y = bar.canvas.height - bar.gutterBottom;
            var w = bar.canvas.width - bar.gutterLeft - bar.gutterRight
            var h = 0;
            context.strokeStyle = 'black';
            context.strokeRect(x, y, w, h);
        }
        
        function barLDraw(idN){
         	var people = ['数量','实洋','码洋'];
            var bar = new RGraph.Bar(idN+'d', [[18,15,45],[21,23,41],[28,21,12],[21,15,38]])
                .Set('labels', ['九月','十月','十一月','十二月'])
                .Set('hmargin', 20)
                .Set('hmargin.grouped', 2)
                .Set('highlight.fill', 'red')
                .Set('key', ['2013年','2012年'])
                .Set('key.colors', ['red','yellow'])
                .Set('key.position', 'gutter')
                .Set('key.position.gutter.boxed', false)
                .Set('labels.above', true)
                .Set('gutter.top',40)
                .Set('title','同比月销售报表统计')
                .Set('colors', ['rgba(0,0,0,0)'])
                .Draw();
		
            for (var i=0,j=0; i<bar.coords.length; ++i,++j) {
                
                if (i % 3 == 0) {
                    j = 0;
                }
                
                var coords = bar.coords[i];
                
                var vp = new RGraph.VProgress(idN+'d',0,100, [25,75])
                    .Set('gutter.left', coords[0])
                    .Set('gutter.top', coords[1])
                    .Set('gutter.right', bar.canvas.width - (coords[0] + coords[2]) )
                    .Set('gutter.bottom', 25)
                    .Set('labels.count', 0)
                    .Set('tickmarks', false)
                    .Set('colors', ['yellow', 'rgba(255,0,0,0.5)'])
                    .Set('tooltips', [people[j],people[j]])
                    .Set('tooltips.event', 'mousemove')
                    .Set('tooltips.effect', 'none')
                vp.Set('strokestyle', 'rgba(0,0,0,0)')
                vp.ondraw = DrawBottomAxis
                vp.Draw();

                vp.positionTooltip = function (obj, x, y, tooltip, idx)
                {
                    tooltip.style.top = (y  - tooltip.offsetHeight - 3) + 'px';
                    tooltip.style.left = (x - 3) + 'px';
                }
                
                vp.canvas.onmousemove = function (e)
                {
                    var tooltip = RGraph.Registry.Get('chart.tooltip');

                    if (tooltip) {
                        tooltip.style.top = (e.pageY  - tooltip.offsetHeight - 3) + 'px';
                        tooltip.style.left = (e.pageX + 3) + 'px';
                    }
                }
                
                vp.canvas.onmouseout = function (e)
                {
                    RGraph.HideTooltip();
                    RGraph.Redraw();
                }
            }
        }
        
        function lineDraw(obj,reid){
        	var idN = $(obj).attr('id'); 
        	var config = ""
        	$.ajax({
        		url:m_url+'/report/l',
        		data:{'reid':reid,'config':config},
        		success:function(data){
            
        			var barData = new Array();//y轴坐标值//[[31,31,10],[13, 43,10],[42, 25,10],[42, 29,10],[59, 28,10],[40, 10,10]];
        			
        			var xClns = data.xcolumnList;
        			var yClns = data.ycolumnName;
        			var colors = data.colors;//颜色['#0179E4','#980055', '#98EDff'];
        			var labels = new Array();//['2008', '2009', '2010', '2011','2012', '2013'];//x轴坐标信息
        			var keys = data.keys;
        			var title = data.title;
        			var xtitle = data.xname;
        			var ytitle = data.yname;
        			
        			var rows = data.dataList;
        			for(var i = 0; i < yClns.length; i++){
        				barData[i] = new Array();
        			}
        			
        			for(var i = 0; i < rows.length; i++){
        				labels[i] = rows[i][xClns];
        				for(var j = 0; j < yClns.length; j ++){
        					barData[j][i] = rows[i][yClns[j]];
        				}
        			}
        			console.log(barData);
        			var line = new RGraph.Line(idN+'d', barData)
			            .Set('key', keys)
			            .Set('gutter.top',40)
			            .Set('title',title)
			            .Set('linewidth', 3)
			            .Set('gutter.left',40)
			            .Set('labels', labels)
			            .Set('labels.above',true)
		          		.Set('shadow', true)
		                .Set('crosshairs', true)
		                .Set('crosshairs.snap', true)
		                .Set('title.xaxis',xtitle)
		                .Set('title.yaxis', ytitle)
		                .Set('gutter.bottom',40)
		                .Set('gutter.left',40)
			            .Draw();
        		}
        	});
        }
        
        
        function pieDraw(obj,reid){
        	var idN = $(obj).attr('id');
        	//var data = [20,13.43,2.83,4.24,7.42,13.43,38.65];
        	var config = ""
        	$.ajax({
        		url:m_url+'/report/p',
        		data:{'reid':reid,'config':config},
        		success:function(data){
        			var barData = new Array();//y轴坐标值//[[31,31,10],[13, 43,10],[42, 25,10],[42, 29,10],[59, 28,10],[40, 10,10]];
        			
        			var xClns = data.xcolumnList;
        			var yClns = data.ycolumnName;
        			var colors = data.colors;//颜色['#0179E4','#980055', '#98EDff'];
        			var labels = new Array();//['2008', '2009', '2010', '2011','2012', '2013'];//x轴坐标信息
        			var keys = data.keys;
        			var title = data.title;
        			var xtitle = data.xname;
        			var ytitle = data.yname;
        			
        			var rows = data.dataList;
        			for(var i = 0; i < rows.length; i++){
        				labels[i] = rows[i][xClns];
        				barData[i] = rows[i][yClns];
        			}
		           var pie = new RGraph.Pie(idN+'d', barData)
			                .Set('labels', labels)
			                .Set('tooltips', labels)
			                .Set('key',labels)
			                .Set('tooltips.event', 'onmousemove')
			                .Set('colors', colors)
			                .Set('strokestyle', 'white')
			                .Set('linewidth', 3)
			                .Set('shadow', true)
			                .Set('shadow.offsetx', 2)
			                .Set('shadow.offsety', 2)
			                .Set('shadow.blur', 3)
			                .Set('gutter.top',40)
				            .Set('title',title)
			                .Set('exploded', 7)
			            
			            //for (var i=0; i<data.length; ++i) {
			            //    pie.Get('labels')[i] = pie.Get('labels')[i] + ', ' + data[i] + '%';
			            //}
			            
			            pie.Draw();
        		}
        	});
        }
        function reloadReport(){
        	//loadRe();
        	alert('请直接修改源码的报表ID   report/report_index.jsp');
        }
        
    </script>
    
    	<span style="color: gray">输入报表ID：<input id='reidI' value='REP001'/><a href="javascript:void(0);" onclick="reloadReport()">刷新报表</a></span>
    <table style="width: 100%;">
		<tr class='banner' >
			<td class='banner' style="width: 100%;height: 30px" colspan="2">商品报表</td>
		</tr>
		<tr>
			<td>
				<div id="a" grf='bar' style="width: 580px;height: 280px;float: left; background-image: ">
					<canvas id="ad" width="600" height="250">[No canvas support]</canvas>
				</div>
			</td>
			<td class="reb">
				<table class='dat'>
					<tr><td>年</td><td>销量</td><td>实洋</td></tr>
					<tr><td>2014-01</td><td>50000</td><td>￥5432432.00</td></tr>
					<tr><td>2014-02</td><td>55000</td><td>￥5432432.00</td></tr>
				</table>
			</td>
		</tr>
		<tr class='banner' >
			<td class='banner' style="width: 100%;height: 30px" colspan="2">商品报表</td>
		</tr>
		<tr>
			<td>
				<div id="b"  grf='barL' style="width: 580px;height: 280px;float: left; background-image: ">
					 <canvas id="bd" width="600" height="250">[No canvas support]</canvas>
				</div>
			</td>
			<td class="reb">
				<table class='dat'>
					<tr><td>年</td><td>销量</td><td>实洋</td></tr>
					<tr><td>2014-01</td><td>50000</td><td>￥5432432.00</td></tr>
					<tr><td>2014-02</td><td>55000</td><td>￥5432432.00</td></tr>
				</table>
			</td>
		</tr>
		<tr class='banner' >
			<td class='banner' style="width: 100%;height: 30px" colspan="2">商品报表</td>
		</tr>
		<tr>
			<td>
				<div id="c"  grf='line' style="width: 580px;height: 280px;float: left; background-image: ">
					 <canvas id="cd" width="600" height="250">[No canvas support]</canvas>
				</div>
			</td>
			<td class="reb">
				<table class='dat'>
					<tr><td>年</td><td>销量</td><td>实洋</td></tr>
					<tr><td>2014-01</td><td>50000</td><td>￥5432432.00</td></tr>
					<tr><td>2014-02</td><td>55000</td><td>￥5432432.00</td></tr>
				</table>
			</td>
		</tr>
		<tr class='banner' >
			<td class='banner' style="width: 100%;height: 30px" colspan="2">商品报表</td>
		</tr>
		<tr>
			<td>
				<div id="d"  grf=pie style="width: 580px;height: 280px;float: left; background-image: ">
					 <canvas id="dd" width="600" height="250">[No canvas support]</canvas>
				</div>
			</td>
			<td class="reb">
				<table class='dat'>
					<tr><td>年</td><td>销量</td><td>实洋</td></tr>
					<tr><td>2014-01</td><td>50000</td><td>￥5432432.00</td></tr>
					<tr><td>2014-02</td><td>55000</td><td>￥5432432.00</td></tr>
				</table>
			</td>
		</tr>
	</table>
</body>

</html>